import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { statisticDefaultProps } from './defaultProps';
import type { StatisticOptions } from './type';
import StatisticGroup from './StatisticGroup';
import StatisticValue from './StatisticValue';
import StatisticLabel from './StatisticLabel';

export interface StatisticProps extends StatisticOptions, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {}

interface StatisticInterface extends FC<StatisticProps> {
  Group: typeof StatisticGroup;
  Value: typeof StatisticValue;
  Label: typeof StatisticLabel;
}

const Statistic: StatisticInterface = (props) => {
  const { className, ui, horizontal, color, inverted, floated, size, children, forwardedRef, ...statisticProps } =
    props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames({ ui, horizontal, inverted }, color, floated, { floated }, size, 'statistic', className),
      ...statisticProps,
    },
    children,
  );
};

Statistic.displayName = 'Statistic';
Statistic.defaultProps = statisticDefaultProps;

Statistic.Group = StatisticGroup;
Statistic.Value = StatisticValue;
Statistic.Label = StatisticLabel;

export default Statistic;
